import { 
  COMPONENT_SET_STYLE,ADD_COMPONENT,
  WIDGETIMG_SET_CONSTYLE,WIDGETIMG_SET_ELEMENTSTYLE,WIDGET_TOGGLE_ENABLE
} from '../actions/components'


const initialState = {
  projectName:'myStrikingly',
  components:[
  {
    id:1,
    positionId:0,
    cptType:1,
    styles:{
      elHeight: 400,
      backgroundImage:'',
      backgroundColor:'#ccc'
    },
    cptName:'banner组件1',
    widgets:[
      {
        id:1,
        enable:true,
        componentId:0,
        positionId:0,
        widgetName:'图片挂件',
        widgetType:1,
        widgetOpen:true,
        imgSrc:'http://img2.kunming.cn/zhuanti/myStrikingly/static/banner2.jpg',
        link:'',
        conStyles:{
          paddingTop:10,
          paddingBottom:10
        },
        styles:{
          width:'100%'
        }
      },
       {
        id:2,
        enable:true,
        componentId:0,
        positionId:0,
        widgetName:'导语挂件',
        widgetType:1,
        widgetOpen:true,
        imgSrc:'http://img2.kunming.cn/zhuanti/myStrikingly/static/banner2.jpg',
        link:'',
        conStyles:{
          paddingTop:10,
          paddingBottom:10
        },
        styles:{
        }
      }
    ]
  },
  {
    id:2,
    positionId:1,
    cptType:1,
    styles:{
      elHeight: 600,
      backgroundImage:'',
      backgroundColor:'#ccc'
    },
    cptName:'轮播和新闻组合插件',
    widgets:[
      {
        id:3,
        enable:true,
        componentId:0,
        positionId:0,
        widgetName:'图片挂件',
        widgetType:1,
        widgetOpen:true,
        imgSrc:'http://img2.kunming.cn/zhuanti/myStrikingly/static/banner2.jpg',
        link:'',
        conStyles:{
          paddingTop:10,
          paddingBottom:10
        },
        styles:{
          width:'100%'
        }
      }
    ]
  }
  ]
}

export default function components(state = initialState.components, action) {

  switch (action.type) {
    
    case COMPONENT_SET_STYLE:{

      return state.map(cpt =>
        cpt.positionId === action.positionId ?
          Object.assign({}, cpt, { styles: action.styles }) :
          cpt
      )

    }    
  
    
    case ADD_COMPONENT:{
      action.cpt.positionId=state.reduce((maxId, cpt) => Math.max(cpt.positionId, maxId), -1) + 1
     return[
     ...state,
     action.cpt
      ]

    }  

    case WIDGETIMG_SET_CONSTYLE:{
     let widgets=state[action.componentId].widgets||{}
     let newWidgets=widgets.map(widget=>{
      return widget.positionId===action.widgetId? Object.assign({}, widget, { conStyles: action.styles }):widget
     })
     return state.map(cpt=>{
      return cpt.positionId === action.componentId ?
         Object.assign({},cpt,{widgets:newWidgets}):cpt
      })

    }
    case WIDGET_TOGGLE_ENABLE:{
     let widgets=state[action.componentId].widgets||{}
     let newWidgets=widgets.map(widget=>{
      return widget.positionId===action.widgetId? Object.assign({}, widget, { enable: action.enable }):widget
     })
     return state.map(cpt=>{
      return cpt.positionId === action.componentId ?
         Object.assign({},cpt,{widgets:newWidgets}):cpt
      })

    }
    case WIDGETIMG_SET_ELEMENTSTYLE:{
     let widgets=state[action.componentId].widgets||{}
     let newWidgets=widgets.map(widget=>{
      return widget.positionId===action.widgetId? Object.assign({}, widget, { styles: action.styles }):widget
     })
     return state.map(cpt=>{
      return cpt.positionId === action.componentId ?
         Object.assign({},cpt,{widgets:newWidgets}):cpt
      })

    }

    default:
      return state
  }
}
